<template>
  <layout :appHeader="{ title: '保單續費' }">
    <view class="home-container">
      <view class="title">續費詳情</view>
      <view class="policy-detail">
        <view class="item">
          <view class="label">保單號</view>
          <view class="value">B123812789371892</view>
        </view>
        <view class="item">
          <view class="label">保险公司</view>
          <picker
            class="item__right"
            :range="companyList"
            range-key="name"
            @change="companyChange"
          >
            <view class="picker-wrapper">
              <text class="value" v-if="company">{{ company }}</text>
              <text class="item__text_holder" v-show="!company"
                >请选择保险公司</text
              >
              <image
                class="more-icon"
                src="https://insurance-image.oss-cn-beijing.aliyuncs.com/icon_more_black%402x.png"
                mode="scaleToFill"
              />
            </view>
          </picker>
        </view>

        <view class="item">
          <view class="label">產品</view>
          <view class="value">FE3/FE4 [五连跃昇储蓄保险计划]</view>
        </view>
        <view class="item">
          <view class="label">應繳保費</view>
          <view class="value">HK$400,000.66</view>
        </view>
        <view class="item">
          <view class="label">期序</view>
          <view class="value">第一期</view>
        </view>
        <view class="item">
          <view class="label">申請人</view>
          <view class="value">黃斌東</view>
        </view>
        <view class="item">
          <view class="label">證件號</view>
          <view class="value">G5929091273891</view>
        </view>
        <view class="item">
          <view class="label">電話號碼</view>
          <view class="value">G5929091273891</view>
        </view>
        <view class="item">
          <view class="label">银行账号</view>
          <view class="value"
            ><u-input v-model="bankAccount" placeholder="請輸入银行账号"
          /></view>
        </view>
      </view>
      <view class="payment-detail">
        <view class="label">實付</view>
        <view class="value">
          <span class="unit">HK$</span><span class="money">400,000</span
          ><span class="mantissa">.66</span>
        </view>
      </view>
      <tui-button
        :disabled="disableSubmit"
        :loading="submitLoading"
        class="bottom-button"
        @click="handleSubmit()"
        >{{ buttonText }}</tui-button
      >
    </view>
  </layout>
</template>
<script>
import tuiButton from "@/components/thorui/tui-button/tui-button";
import companyList from "./company.json";
export default {
  components: {
    tuiButton,
  },
  data() {
    return {
      submitLoading: false,
      disableSubmit: false,
      buttonText: "申請代繳",
      companyList,
      company: "",
      bankAccount: "",
    };
  },
  methods: {
    handleSubmit() {
      this.submitLoading = true;
      this.disableSubmit = true;
      this.buttonText = "正在支付...";
      setTimeout((_) => {
        uni.navigateTo({
          url: `pages/account/paymentDetail/index?company=${this.company}&bankAccount=${this.bankAccount}`,
        });
        this.buttonText = "申請代繳";
        this.submitLoading = false;
        this.disableSubmit = false;
      }, 2000);
    },
    companyChange(res) {
      const index = res.detail.value;
      this.company = this.companyList[index].name;
    },
  },
};
</script>
<style lang="scss">
.home-container {
  position: relative;
  padding: 24rpx 26px;
  height: calc(100vh - 54px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 50rpx;
  background: #fff;
  margin-top: 10px;
  .title {
    color: #42475f;
    font-size: 18px;
    font-weight: bold;
    line-height: 50px;
  }
  .policy-detail {
    border-bottom: 1px solid rgba(142, 145, 159, 0.2);
    padding-top: 20px;
    padding-bottom: 20px;
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      font-size: 14px;
      .label {
        color: #8e919f;
        width: 100px;
      }
      .value {
        color: #42475f;
        font-weight: bold;
      }
    }
  }
  .payment-detail {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    .value {
      font-size: 24px;
      .unit {
        font-size: 12px;
        vertical-align: super;
        margin-right: 4px;
      }
      .money {
        position: relative;
        top: -2px;
      }
      .mantissa {
        font-size: 12px;
        vertical-align: super;
        margin-left: 4px;
      }
    }
  }

  .bottom-button {
    font-weight: 500;
    background: #515cc3;
    color: #fff;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px !important;
  }
  .item__right {
    .picker-wrapper {
      text-align: right;
      display: flex;
      align-items: center;
      justify-content: center;

      .item__text_holder {
        color: #9b9b9b;
      }

      .more-icon {
        width: 32rpx;
        height: 32rpx;
        margin-left: 8rpx;
      }
    }
  }
}
</style>